<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        style="width:200px"
      >
      </el-form>

      <el-table :data="rightsList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="权限名称" prop="authName"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限等级" prop="level">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === '0'">一级</el-tag>
            <el-tag type="success" v-else-if="scope.row.level === '1'"
              >二级</el-tag
            >
            <el-tag type="danger" v-else>三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
// 27.2   定义权限列表rights组件 导入router.js,rights作为子路由规则加载给home在main区域展示，
// 因此要在home路由规则的children数组中新建一个子路由rights(path要监听的地址根据点击权限列表时所访问的地址决定()，component决定展示的组件)
// 28 基本布局  面包屑+card(table表格展示权限列表)
// 28.1   users中粘贴面包屑导航
// 28.2    el-card
// 29  请求获取权限列表数据
// 分析: 请求路径：rights/:type  请求方法：get  请求参数type:list/tree    list时获取数据是列表性质相互独立;tree时获取数据是树形结构节点之间通过children属性连接
// 此次只需要列表结构,因此这次传list
// 29.1  在data中定义rightsList空数组,这样之后后端获取的"权限列表"数据可以直接保存在data中
//  在created中发起首屏数据请求获取所有权限列表数据,this.getRightsList(),在methods中定义this.getRightsList()件将获取的"权限列表"数据直接保存在data中的rightsList
// 29.2   渲染table表格   权限等级：0表示一级权限；1表示二级权限；2表示三级权限；el-tag标签，自定义权限等级，通过作用于插槽自定义他的输出格式，template模板加slot-scope="scope"接受所有数据
// 三选一时使用v-if/v-else-if/v-else决定显示哪一个  如v-if="scope.row.level === '0'"(返回的数据是字符串格式)
// 30 角色列表
// 31 角色列表路由切换    新建Roles组件,导入router.js,roles作为子路由规则加载给home在main区域展示，
//   另转roles组件
export default {
  data() {
    return {
      // 所有权限列表
      rightsList: []
    }
  },
  created() {
    // 获取所有权限
    this.getRightsList()
  },
  methods: {
    // 获取权限列表
    // 请求路径：rights/:type  请求方法：get   此次:type直接写死list
    // 这样在页面创建期间会调用 this.getRightsList()函数，发起ajax数据请求，接下来get函数会返回一个promise对象，
    // 为了简化promise对象，用async和await优化异步操作，接着会得到一个数据对象，从数据对象身上解构赋值出来一个data属性，重命令为res
    // 打印res,获取mes:获取权限列表成功 status:200  data中data: Array(48), meta: {…}
    // 数据拿到后，首先判断状态码是否等于200，!=200，失败
    // 等于200时，表示数据获取成功，首先将后端获取数据rightsList保存在data中，接着赋值，
    async getRightsList() {
      const { data: res } = await this.$http.get('rights/list')
      // console.log(res)48个数组
      if (res.meta.status !== 200) { return this.$message.error('获取权限列表失败') }
      this.rightsList = res.data
    }
  }
}
</script>

<style lang="less" scoped></style>>
